<script setup lang="ts">
import { shallowRef, onMounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import { GeoComponent, VisualMapComponent } from 'echarts/components';
import type { GeoComponentOption, VisualMapComponentOption } from 'echarts/components';
import { MapChart } from 'echarts/charts';
import type { MapSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import axios from 'axios';

echarts.use([GeoComponent, MapChart, CanvasRenderer, VisualMapComponent]);

type EChartsOption = echarts.ComposeOption<GeoComponentOption | VisualMapComponentOption | MapSeriesOption>;

const mapChartRef = shallowRef<HTMLDivElement | null>(null);

const myChart = ref<echarts.ECharts | null>(null);
const geoJSON = ref<any>();
let option: EChartsOption;
const hiddenName = ['海南省', '台湾省', '香港特别行政区', '澳门特别行政区'];

const init = async () => {
  try {
    const baseUrl = import.meta.env?.VITE_CDN_BASE_PATH || '';
    const { data } = await axios.get(`${baseUrl}/images/upload/config/100000_full.json`);
    geoJSON.value = data;
    console.log('data: ', geoJSON.value);
    myChart.value = echarts.init(mapChartRef.value);
    myChart.value.showLoading();

    echarts.registerMap('china', geoJSON.value);
    option = {
      visualMap: {
        show: false,
        left: 'right',
        min: 0,
        max: 100,
        inRange: {
          color: ['#b8cae2', '#3A7BD1'],
        },
        text: ['High', 'Low'],
        calculable: true,
      },

      series: [
        {
          name: 'china map',
          type: 'map',
          roam: false,
          map: 'china',
          width: '94%',
          top: '3%',
          scaleLimit: {
            min: 1,
            max: 1,
          },
          label: {
            show: true,
            color: '#ffffff',
            fontSize: '8px',
            formatter: (params: any) => {
              return hiddenName.includes(params.name) ? '' : params.name.slice(0, 2);
            },
          },
          emphasis: {
            disabled: true,
          },
          select: {
            disabled: true,
          },
          data: [],
        },
      ],
    };
    geoJSON.value.features.forEach((v: any) => {
      const dataItem: any = { name: v.properties.name, value: 0 };
      if (dataItem.name === '四川省') {
        dataItem.value = 100;
      }
      if (dataItem.name === '甘肃省') {
        dataItem.label = {
          offset: [-26, -20],
        };
      }
      if (dataItem.name === '河北省') {
        dataItem.label = {
          offset: [-5, 10],
        };
      }
      // @ts-ignore
      option.series[0].data.push(dataItem);
    });
    myChart.value.setOption(option);
  } catch {
    /** empty */
  } finally {
    myChart.value?.hideLoading();
  }
};

onMounted(() => {
  init();
});
</script>
<template>
  <div class="relative">
    <div class="mapChart" ref="mapChartRef"></div>
    <div class="absolute left-4 top-3 text-xs flex items-center">
      <div class="w-[10px] h-[10px] rounded-sm bg-[#3A7BD1] mr-1"></div>
      已被代理区域
    </div>
  </div>
</template>
<style lang="less" scoped>
.mapChart {
  height: 77.3333vw;
  max-height: calc(450px * 0.77333);
}
</style>
